import React, { Component } from 'react';
import './MenuBottomNav.scss'
import { Item } from 'antd-mobile/lib/tab-bar';
class MenuBottomNav extends Component {
  constructor(props) {
    super(props)
    this.state = {
      nowIndex: 0,
      list: [
        {
          img: require('../../images/tab1.png'),
          activeImg: require('../../images/tab1color.png'),
          text: '首页',
          url: '/index'
        },
        {
          img: require('../../images/tab2.png'),
          activeImg: require('../../images/tab2color.png'),
          text: '订单',
          url: '/allorder'
        },
        {
          img: require('../../images/tab3.png'),
          activeImg: require('../../images/tab3color.png'),
          text: '我的',
          url: '/my'
        }
      ]
    }
  }
  componentDidMount() {
		console.log(this.props.history, 222)
	}
  select(index, item) {
    console.log(11)
    this.setState({nowIndex: index});
    this.props.onChoose(item.url)
  }
  render() {
    let count = this.props.count || ''
    return (
      <div className="menu-bottom-nav flex space-around y-center">
        {this.state.list.map((item, index) => {
          if (index === this.state.nowIndex) {
            if (index === 2) {
              return (
              <div className="item active" onClick={() => {this.select(index, item)}} key={index}>
                <img src={item.activeImg} alt=""/>
                <div>{item.text}</div>
                {count ? <span className="count">{count}</span>: ''}
                
              </div>)
            } else {
              return (
                <div className="item active" onClick={() => {this.select(index, item)}} key={index}>
                  <img src={item.activeImg} alt=""/>
                  <div>{item.text}</div>
                </div>
              )
            }
          } else {
            if (index === 2) {
              return (
                <div className="item" onClick={() => {this.select(index, item)}} key={index}>
                  <img src={item.img} alt=""/>
                  <div>{item.text}</div>
                  {count ? <span className="count">{count}</span>: ''}
                </div>
              )
            } else {
              return (
                <div className="item" onClick={() => {this.select(index, item)}} key={index}>
                  <img src={item.img} alt=""/>
                  <div>{item.text}</div>
                </div>
              )
            }
          }
        })}
        
      </div>
    );
  }
}

export default MenuBottomNav;